import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as _ from 'lodash';
import * as moment from 'moment';

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
// import { StatusBar } from '@ionic-native/status-bar/ngx';

import {
  DailyReportServiceProxy,
  SearchInputReport
} from '../../../shared/service-proxies/service-proxies';

@Component({
  selector: 'app-daily-report',
  templateUrl: './daily-report.page.html',
  styleUrls: ['./daily-report.page.scss'],
})
export class DailyReportPage implements OnInit {

  dataParam: SearchInputReport = new SearchInputReport();

  showNum: number = 0;
  yValue: number = 150;
  
  id: string = "aaa";
  list: any;
  lists: any;
  optionData: number = 0;
  lastYeardayList: any = [];//本月天数列表
  thisYeardayList: any = [];//去年本月天数列表
  dayList: any = [];//图表中的天数 
  monthData: any = [];//月报数据
  monthDataLastYear: any = [];//去年月报数据
  nowDate: any = new Date();
  sureTime: any = parseInt(moment(this.nowDate).format("YYYY")) + parseInt(moment(this.nowDate).format("MM"));
  lastYear: any = parseInt(moment(this.nowDate).subtract(1, "years").format("YYYY")) + "年" + parseInt(moment(this.nowDate).format("MM")) + "月";//去年的日期
  thisYear: any = parseInt(moment(this.nowDate).format("YYYY")) + "年" + parseInt(moment(this.nowDate).format("MM")) + "月";//今年的日期
  localdate: any = new Date(); //Sat Jul 20 2013 10:43:36 GMT+0800 (中国标准时间)
  lastYearDate: any = new Date(this.localdate - 365 * 24 * 60 * 60 * 1000);

  constructor(
    private _DailyReportServiceProxy: DailyReportServiceProxy,
    private router: Router,
    private screenOrientation: ScreenOrientation,
    // private statusBar: StatusBar,
  ) {
    // this.statusBar.overlaysWebView(true);
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
    console.log(66666);
  }

  ngOnInit() {
    // this.getDailyData();
    this.getLastYearData();
  }
  //将要离开这个页面是触发
  ionViewWillLeave() {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

  goBack() {
    this.router.navigateByUrl('home')
  }

  changeShowNum() {
    if(this.showNum == 0){
      this.showNum = 1;
      console.log("showNum", this.showNum);
    } else{
      this.showNum = 0;
      console.log("showNum", this.showNum);
    }
  }

  choosedTime() {
    this.thisYear = this.sureTime.year.value + "年" + this.sureTime.month.value + "月";
    this.lastYear = this.sureTime.year.value - 1 + "年" +this.sureTime.month.value + "月";
    this.dayList = [];
    this.lastYeardayList = [];
    this.thisYeardayList = [];
    this.monthDataLastYear = [];
    this.monthData = [];
    this.nowDate = moment(this.sureTime.year.value + "-" + this.sureTime.month.text);
    this.lastYearDate = moment(this.sureTime.year.value - 1 + "-" + this.sureTime.month.text)
    this.dataParam.start = this.nowDate;
    this.getLastYearData();
    console.log("sureTime", this.sureTime);
    console.log("this.nowDate", this.nowDate);
    console.log("this.lastYearDate", this.lastYearDate);
  }

  subtractYValue(){
    this.dayList = [];
    this.lastYeardayList = [];
    this.thisYeardayList = [];
    this.monthDataLastYear = [];
    this.monthData = [];
    this.optionData = this.optionData - 10;
    this.getLastYearData();
    console.log(88888);
  }
  addYValue(){
    this.dayList = [];
    this.lastYeardayList = [];
    this.thisYeardayList = [];
    this.monthDataLastYear = [];
    this.monthData = [];
    this.optionData = this.optionData + 10;
    this.getLastYearData();
    console.log(88888);
  }
  suerNUm(){
    this.dayList = [];
    this.lastYeardayList = [];
    this.thisYeardayList = [];
    this.monthDataLastYear = [];
    this.monthData = [];
    this.optionData = this.optionData;
    console.log("刻度", this.optionData);
    this.getLastYearData();
  }

  getLastYearData() {
    this.dataParam.year = false;
    this.dataParam.start = moment(this.lastYearDate);
    this.dataParam.tagfields = ["供水量"];
    this._DailyReportServiceProxy.searchWaterReport(this.dataParam)
      .subscribe((res) => {
        let grouped = _.groupBy(res, m => m.day);
        let result = _.uniq(res.map(m => m.day)).map(d => {
          let sum = _.sumBy(grouped[d], s => parseInt(s.value));
          let month = res.filter(m => m).map(m => m.month)[0];
          let year = res.filter(m => m).map(m => m.year)[0];
          return {
            day: d,
            month: month,
            year: year,
            name: "日供水量",
            value: sum
          };
        });
        for (var l in result) {
          this.lastYeardayList.push(result[l].day);
          this.monthDataLastYear.push((result[l].value / 10000).toFixed(2));
        }
        this.getDayReportData();
      })

  }

  getDayReportData() {
    this.dataParam.year = false;
    this.dataParam.start = this.nowDate;
    this.dataParam.tagfields = ["供水量"];
    this._DailyReportServiceProxy.searchWaterReport(this.dataParam)
      .subscribe((res) => {
        let grouped = _.groupBy(res, m => m.day);
        let result = _.uniq(res.map(m => m.day)).map(d => {
          let sum = _.sumBy(grouped[d], s => parseInt(s.value));
          let month = res.filter(m => m).map(m => m.month)[0];
          let year = res.filter(m => m).map(m => m.year)[0];
          return {
            day: d,
            month: month,
            year: year,
            name: "日供水量",
            value: sum
          };
        });
        for (var l in result) {
          this.thisYeardayList.push(result[l].day);
          this.monthData.push((result[l].value / 10000).toFixed(2));
        }
        this.dataList();
      })
  }

  dataList() {
    let self = this;
    if (this.lastYeardayList.length >= this.thisYeardayList.length) {
      this.dayList = this.lastYeardayList;
    } else {
      this.dayList = this.thisYeardayList;
    }

    this.lists = {
      title: {
        text: '(单位：万m³)',
        top: -5,
        textStyle: {      //标题颜色
          color: '#f5f5f5'
        },
      },
      color: '#f5f5f5',
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: [this.lastYear, this.thisYear],
        textStyle: {      //标题颜色
          color: '#f5f5f5'
        }
      },
      toolbox: {
        show: true,
        itemSize: 18,
        iconStyle: {
          color: "#f5f5f5",
          borderColor: "#f5f5f5"
        },
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'], color: "#f5f5f5" },
          restore: { show: false },
          saveAsImage: { show: false },
          myTool2: {
            show: true,
            title: '自定义扩展方法',
            icon: 'image://../../../assets/images/edit.png',
            onclick: function () {
              self.changeShowNum();
            }
          }
        },
      },
      xAxis: [
        {
          type: 'category',
          color: "#65b1eb",
          data: this.dayList,
          axisLabel: {
            textStyle: {
              color: '#f5f5f5'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          min: this.optionData,
          axisLabel: {
            textStyle: {
              color: '#f5f5f5'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          }
        }
      ],
      series: [
        {
          name: this.lastYear,
          type: 'bar',
          color: '#3cffb5',
          min: 150,
          data: this.monthDataLastYear,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        },
        {
          name: this.thisYear,
          type: 'bar',
          color: '#f8bfa3',
          min: 150,
          data: this.monthData,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }
      ]
    };
  }


  getMonthValue() {
    console.log();
  }

}
